<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="4">
        <lay-field title="部门">
          <lay-tree :data="treeData" collapse-transition @node-click="handleClick">
          </lay-tree>
        </lay-field>
      </lay-col>
      <lay-col :md="20">
        <router-view></router-view>
      </lay-col>
    </lay-row>
  </lay-container>
</template>
  
<script lang="ts" setup>
import { ref, watch } from "vue";
import { getDeptListTree } from "../../../api/module/user/user";
import { useRouter } from "vue-router";

const treeData = ref([])
const router = useRouter();
const GetList = function () {
  getDeptListTree().then((res) => {
    if (res.status == 1) {
      treeData.value = res.data
    }
  })
}

function handleClick(node: any) {
  router.push({ path: '/auth/user/list', query: { deptId: node.id } })
}

GetList()

</script>
<style scoped>

</style>